<template>
  <div>
    <el-form ref="searchList" size="normal">
      <el-row :gutter="4">
        <el-col :span="4">
          <div>
            <el-button type="primary" size="medium" @click="search" :loading="loading">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData.results" border stripe :height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="create_date" label="创建时间" min-width="180" align="center">
        <template slot-scope="{row}">
          {{ $util.formatDate(row.create_date, 'yyyy-MM-dd hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="apply_company_code" label="申报单位" width="180" align="center">
      </el-table-column>
      <el-table-column prop="repairs_person" label="报修联系人" width="120" align="center">
      </el-table-column>
      <el-table-column prop="repairs_person_phone" label="报修联系人电话" min-width="120" align="center">
      </el-table-column>
      <el-table-column prop="plan_complete_date" label="工单计划完成时间" min-width="120" align="center">
        <template slot-scope="{row}">
          {{ $util.formatDate(row.plan_complete_date, 'yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" width="160" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">需求单位填报</span>
          <span v-if="scope.row.status == 1">保障部（初审）</span>
          <span v-if="scope.row.status == 2">运维技术部（审核）</span>
          <span v-if="scope.row.status == 3">运维总集（联通）上传完成情况</span>
          <span v-if="scope.row.status == 4">需求单位确认</span>
          <span v-if="scope.row.status == 5">结束</span>


        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="200" align="center">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="green" size="mini" @click="projectInfo(row)">查看</el-button>
            <el-button type="danger" plain size="mini" @click="showPage(row)">
              审批意见
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange" :page-sizes="[10, 50, 100, 200]"
                     :page-size="10" background layout="total, sizes, prev, pager, next" :total="tableData.totalRecord"
      >
      </el-pagination>
    </div>

    <!-- 审核信息 -->
    <el-dialog title="审核信息" :visible.sync="verifyShow" size="70%" @close="cancel" center :destroy-on-close="true">
      <el-table :data="verifyData" border stripe height="400px">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.check_status==='1'?'success':'danger'" effect="light">
              {{ row.check_status === '1' ? '通过' : '驳回' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="审核机构" align="center">
        </el-table-column>
        <el-table-column prop="message" label="审核意见" align="center">
        </el-table-column>
        <el-table-column prop="create_date" label="审核时间" width="100" align="center">
          <template slot-scope="{row}">
            {{ $util.formatDate(row.create_date, 'yyyy-MM-dd') }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 项目信息 -->
    <el-drawer :title="projectTitle" :visible.sync="projectShow" size="70%" center :destroy-on-close="true"
               :wrapperClosable="false"
    >
      <work-order :project-params="projectParams" :switch="this.switch" @cancel="cancel" @init="init"
      ></work-order>
    </el-drawer>

    <el-dialog
        title="审批意见列表"
        :visible.sync="opinionShow"
        width="80%"
    >
      <ExaminePage ref="examinepage"></ExaminePage>
      <template slot="footer" class="dialog-footer">
        <el-button type="primary" @click="opinionShow = false">关 闭</el-button>
      </template>
    </el-dialog>
    <el-dialog
        title="上传完成情况"
        :visible.sync="dialogVisible"
        width="80%"
    >
      <el-form :model="json" ref="form" label-position="top" :rules="rules"
               :inline="false" size="normal"
      >
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <el-form-item label="审批意见" prop="message">
              <el-input v-model="json.message" placeholder="审批意见"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="工单完成情况" prop="completion_info">
              <el-input v-model="json.completion_info" placeholder="工单完成情况"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-form-item label="工单完成工时" prop="completion_hour">
              <el-input v-model="json.completion_hour" placeholder="工单完成工时">
                <template slot="append">小时</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="scwcgs">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import lookPdfItem from '@/components/Upload/LookPdf1.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'PastDeclaredVerifyProject',
  components: {
    lookPdfItem
  },
  props: {
    status: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    // 获取当前年份
    let now = new Date().getFullYear().toString()

    return {
      dialogVisible: false,
      json: {},
      rules: {
        message: [
          { required: true, message: '请输入审批意见', trigger: 'blur' }
        ],
        completion_info: [
          { required: true, message: '请输入工单完成情况', trigger: 'blur' }
        ],
        completion_hour: [
          { required: true, message: '请输入工单完成工时', trigger: 'blur' }
        ]
      },
      status_list: [{ label: '全部', value: '' },
        { label: '需求单位填报', value: '0' }, {
          label: '保障部（初审）',
          value: '1'
        }, { label: '运维技术部（审核）', value: '2' }, {
          label: '运维总集（联通）上传完成情况',
          value: '3'
        }, { label: '需求单位确认', value: '4' }],
      loading: false,
      saveLoading: false,
      searchList: {
        apply_batch: now
      },
      tableData: [],
      offsetHeight: document.documentElement.clientHeight - 280,
      pageNo: '1',
      pageSize: '10',
      projectShow: false,
      projectParams: {},
      projectTitle: '',
      verifyShow: false,
      verifyData: [],
      switch: false,
      opinionShow: false
    }
  },
  created() {

  },
  mounted() {

    this.init()
  },
  methods: {
    scwcgs() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          let params = {}
          params.id = this.json.id
          params.message = this.json.message
          params.completion_info = this.json.completion_info
          params.completion_hour = this.json.completion_hour
          params.status = '4'

          const res = this.$http('infoWorkOrderServiceupdateApplyData', params)
          this.$tips.success(res.errmsg)
          this.dialogVisible = false
          this.init()
        }
      })
    },
    updateApplyDataZhongJi(row) {
      this.dialogVisible = true
      this.json = row
    },
    showPage(row) {
      this.opinionShow = true
      this.$nextTick(() => {
        this.$refs.examinepage.getList(row)
      })
    },
    addProject() {
      this.projectShow = true
      this.projectParams = {}
      this.projectTitle = '新增工单'
      this.switch = true
    },
    async init() {
      this.loading = true
      let create_by = this.status === '0' ? this.$store.getters.user.id : ''
      const res = await this.$http('infoWorkOrderServicefindAuditList', {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.status,
        company_code: this.$store.getters.user.company_code
      })
      this.tableData = res
      this.loading = false
    },
    search() {
      this.pageNo = 1
      this.pageSize = 10
      this.init()
    },
    async verifyInfo(id) {
      this.saveLoading = true
      const res = await this.$http('historyYWporjectLog', {
        project_id: id,
        isFilterCode: true
      })
      this.verifyData = res
      this.verifyShow = true
      this.saveLoading = false
    },
    projectInfo(row) {
      this.projectShow = true
      this.projectParams = {
        pid: row.id,
        switch: true,
        row: row
      }
      this.projectTitle = '查看工单'
      this.switch = false
    },
    updateInfo(row) {
      this.projectShow = true
      this.projectParams = {
        pid: row.id,
        switch: false,
        row: { ...row }
      }
      this.projectTitle = '修改工单'
      this.switch = true
    },
    deleteInfo(row) {
      this.$confirm('是否确认删除选中项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$http('infoWorkOrderServiceupdateData', {
          id: row.id,
          del_flag: '1'
        })
        this.$tips.success(res.errmsg)
        this.init()
      }).catch(() => {

      })
    },
    updateApplyDataShenHe(row) {
      this.$prompt('输入审批意见', '审批', {
        confirmButtonText: '确定',
        cancelButtonText: '驳回',
        cancelButtonClass: 'reject',
        inputType: 'textarea',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入审批意见'
      }).then(async({ value }) => {
        let status = parseInt(row.status) + 1
        this.infoWorkOrderServiceupdateApplyData(row.id, value, status)
      }).catch(async({ value }) => {
        let status = parseInt(row.status) - 2
        this.infoWorkOrderServiceupdateApplyData(row.id, value, status)
      })
    },
    xuqiudanweiqueren(row) {
      this.$prompt('输入审批意见', '审批', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入审批意见'
      }).then(async({ value }) => {
        let status = '5'
        this.infoWorkOrderServiceupdateApplyData(row.id, value, status)
      })
    },
    infoWorkOrderServiceupdateApplyData(id, value, status) {
      //审批和驳回
      const res = this.$http('infoWorkOrderServiceupdateApplyData', {
        id: id,
        message: value,
        status: status
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
    updateApplyData(row) {
      this.$confirm('是否确认上报选中项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$http('infoWorkOrderServiceupdateApplyData', {
          id: row.id,
          status: '1'
        })
        this.$tips.success(res.errmsg)
        this.init()
      }).catch(() => {

      })
    },
    contract(id) {
      this.$emit('contractInfo', id)
    },
    cancel() {
      this.projectShow = false
      this.projectParams = {}
      this.verifyShow = false
      this.verifyData = []
    },
    pageNoChange(pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  }
}
</script>
<style lang="scss" scoped>
::v-deep .reject {
  background-color: red !important;
  color: #FFFFFF !important;
}
</style>
